//写一个类，目的为了生成对象；
class Slide {
  //每个对象都有自己的属性，构造函数可以用来传递属性；
  //配置工作
  constructor(config) {
    this.config = config
    this.el = document.querySelector(config.el)
    this.section = []
    this.el.style.width = `${config.width}px`
    this.el.style.height = `${config.height}px`
  }

  //基础工作
  run() {
    //console.log(this.config)
    this.createSection()
    this.createSectionDiv()
  }

  //创建section
  createSection() {
    for (let i = 0; i < this.config.limit; i++) {
      let section = document.createElement('section')
      section.style.width = `${this.width()}px`
      section.style.height = `${this.config.height}px`

      this.section.push(section)
      this.el.insertAdjacentElement('beforeEnd', section)
    }
  }
  //创建section里面的div
  createSectionDiv() {
    for (const sectionIndex in this.section) {
      for (let divIndex = 0; divIndex < this.config.images.length; divIndex++) {
        let div = document.createElement('div')
        div.style.width = `${this.width()}px`
        div.style.height = `${this.config.height}px`
        this.section[sectionIndex].insertAdjacentElement('beforeEnd', div)

        this.createImages(div, sectionIndex, divIndex)
      }
    }
  }

  createImages(div, sectionIndex, divIndex) {
    let img = document.createElement('img')
    img.src = this.config.images[divIndex]
    img.style.width = `${this.config.width}px`
    img.style.height = `${this.config.height}px`
    img.style.transform = `translateX(${-this.width() * sectionIndex}px)`
    div.insertAdjacentElement('beforeEnd', img)
  }

  width() {
    return this.config.width / this.config.limit
  }
}
